<template>
	<div>
		<zh-button color="primary" @click="rolesdialogVisible=true">添加角色</zh-button>
		<!-- 列表 -->
		<el-table border width="100%" :data="rolelist">
			<el-table-column type="expand">
				<template slot-scope="scope">

					<div class="wrapper" v-for="(item,index) in scope.row.children" :key="index">
						<!-- 一级权限 -->
						<div class="wrapper-one">
							<el-tag effect="dark" closable @close="handleColesConfirm(scope.row,item.id)">
								{{item.authName}}
							</el-tag>
							<i class="el-icon-caret-right"></i>
						</div>
						<!-- 二级 三级权限 -->
						<div style="width: 80%;">
							<div class="wrapper-two" v-for="(item1,index1) in item.children" :key="index1">
								<!-- 二级 -->
								<div class="two">
									<el-tag effect="dark" type="success" closable
										@close="handleColesConfirm(scope.row,item1.id)">{{item1.authName}}</el-tag>
									<i class="el-icon-caret-right"></i>
								</div>
								<!-- 三级 -->
								<div class="three">
									<el-tag effect="dark" closable type="warning"
										v-for="(item2,index2) in item1.children" :key="index2"
										@close="handleColesConfirm(scope.row,item2.id)">{{item2.authName}}
									</el-tag>
								</div>
							</div>
						</div>
					</div>

				</template>
			</el-table-column>
			<el-table-column type="index" label="#"></el-table-column>
			<el-table-column label="角色名称" prop="roleName"></el-table-column>
			<el-table-column label="角色描述" prop="roleDesc"></el-table-column>
			<el-table-column label="操作">

				<template slot-scope="scope">
					<div style="display: flex;">
						<!-- 编辑 -->
						<zh-button color="primary" icon='edit' size="mini" @click="showDialog(scope.row)">编辑</zh-button>
						<zh-button color="red" icon='delete' size="mini" @click="removeRoles(scope.row.id)">删除
						</zh-button>
						<zh-button color="orange" icon='Settingscontroloptions' size="mini" @click="authRoles(scope.row)">分配权限
						</zh-button>
					</div>
				</template>

			</el-table-column>
		</el-table>

		<!-- 添加角色的对话框 -->
		<zh-dialog title="添加角色" width="50%" top="10%" :visible.sync="rolesdialogVisible" @close="handleRoleClose">
			<el-form label-width="80px" :model="addroleparams" :rules="RoleFormRules" ref="RoleFormRef">
				<el-form-item label="角色名称" prop="roleName">
					<el-input v-model="addroleparams.roleName"></el-input>
				</el-form-item>
				<el-form-item label="角色描述" prop="roleDesc">
					<el-input v-model="addroleparams.roleDesc"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" style="display: flex;">
				<zh-button color="red" @click="rolesdialogVisible=false">取消</zh-button>
				<zh-button color="primary" @click="addRoles">确 定</zh-button>
			</div>
		</zh-dialog>

		<!-- 编辑角色的对话框 -->
		<zh-dialog title="修改角色" width="50%" top="10%" :visible.sync="ShowEditDialogVisible" @close="edithandleClose">
			<el-form label-width="80px" :model="editroleparams" :rules="RoleFormRules" ref="editRoleFormRef">
				<el-form-item label="角色名称" prop="roleName">
					<el-input v-model="editroleparams.roleName"></el-input>
				</el-form-item>
				<el-form-item label="角色描述" prop="roleDesc">
					<el-input v-model="editroleparams.roleDesc"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" style="display: flex;">
				<zh-button color="red" @click="ShowEditDialogVisible=false">取消</zh-button>
				<zh-button color="primary" @click="editRoles">确 定</zh-button>
			</div>
		</zh-dialog>

		<!-- 分配权限对话框 -->
		<zh-dialog title="分配权限" width="50%" top="10%" :visible.sync="authDialogVisible">

			<el-tree :data="rightLists" :props="{label:'authName',children:'children'}" show-checkbox node-key="id"
				default-expand-all  ref="tree">
			</el-tree>

			<div slot="footer" style="display: flex;">
				<zh-button color="red" @click="authDialogVisible=false">取消</zh-button>
				<zh-button color="primary" @click="addAuth">确 定</zh-button>
			</div>
		</zh-dialog>
	</div>
</template>

<script>
	export default {
		// 组件名称
		name: 'demo',
		// 组件状态值
		data() {
			return {
				// 角色列表
				rolelist: [],
				// 控制对话框显示隐藏
				rolesdialogVisible: false,
				ShowEditDialogVisible: false,
				authDialogVisible: false,
				// 添加角色参数
				addroleparams: {
					roleName: '',
					roleDesc: '',
				},
				// 校验规则
				RoleFormRules: {
					roleName: [{
						required: true,
						message: "请输入角色名称",
						trigger: "blur"
					}, {
						min: 2,
						max: 8,
						message: "角色名称长度在2~8个字符之间",
						trigger: "blur"
					}],
					roleDesc: [{
						required: true,
						message: "请输入角色描述",
						trigger: "blur"
					}],
				},
				// 修改角色参数
				editroleparams: {
					id: '',
					roleName: "",
					roleDesc: "",
				},

				// 权限列表
				rightLists: [],
				// 默认选中的节点ID数组
				defkeyid: [],
			}
		},
		// 组件方法
		methods: {
			// 获取角色列表数据
			async getRoleslist() {
				try {
					const data = await this.$apis.getRoles();
					this.rolelist = data.data1;
				} catch (e) {
					console.log(e)
				}
			},
			// 监听关闭事件
			handleRoleClose() {
				this.$refs.RoleFormRef.resetFields();
			},
			edithandleClose() {
				this.$refs.editRoleFormRef.resetFields();
			},
			// 添加角色
			async addRoles() {
				try {
					await this.$refs.RoleFormRef.validate();
					this.rolesdialogVisible = false;
					try {
						const data = await this.$apis.getAddRoles(this.addroleparams);
						this.getRoleslist();
						this.$message.success(data.msg)
						this.addroleparams = {};
					} catch (e) {
						this.$message.error(e)
					}
				} catch (e) {
					console.log(e)
				}
			},
			// 修改角色
			showDialog(row) {
				this.ShowEditDialogVisible = true;
				this.editroleparams = row;
			},
			async editRoles() {
				try {
					await this.$refs.editRoleFormRef.validate();
					this.ShowEditDialogVisible = false;
					try {
						const data = await this.$apis.getEditRoles(this.editroleparams)
						this.$message.success(data.msg)
						this.getRoleslist();
					} catch (e) {
						this.$message.error(e)
					}
				} catch (e) {
					console.log(e)
				}
			},
			// 删除角色
			async delroles(id) {
				try {
					const data = await this.$apis.getDelRoles(id);
					this.getRoleslist();
					console.log(data)
				} catch (e) {
					console.log(e)
				}
			},
			// 删除角色提示框
			async removeRoles(id) {
				try {
					await this.$confirm('是否删除', '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					}).then(() => {
						this.delroles(id);
						this.$message.success("删除成功")
					}).catch(() => {
						this.$message.info('已取消删除')
					})
				} catch (e) {
					console.log(e)
				}
			},
			// 删除指定权限
			async removeAssign(id, ids) {
				try {
					const data = await this.$apis.getDelAssignRole(id, ids);
					this.getRoleslist();
					console.log(data)
				} catch (e) {
					console.log(e)
				}
			},

			// 删除指定权限提示
			async handleColesConfirm(id, ids) {
				console.log(id)
				try {
					await this.$confirm('是否删除', '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					}).then(() => {
						this.removeAssign(id, ids);
						this.$message.success("删除成功")
					}).catch(() => {
						this.$message.info('已取消删除')
					})
				} catch (e) {
					console.log(e)
				}
			},

			// 权限列表
			async authRoles() {
				this.authDialogVisible = true;
				try {
					const data = await this.$apis.getAuthList();
					this.rightLists = data.data1;
					console.log(data)
				} catch (e) {
					console.log(e)
				}
			},

			// 分配权限
			async addAuth() {
				try {
					const checkedKeys = this.$refs.tree.getCheckedKeys();
					const halfCheckedkeys = this.$refs.tree.getHalfCheckedKeys();

					await this.$apis.getAuthLimits(17571, [...checkedKeys, ...halfCheckedkeys].join(','));
					this.authDialogVisible=false;
					this.getRoleslist();
					this.$message.success('授权成功',{delay:1000})
				} catch (e) {
					console.log(e)
				}
			},

		},
		/**
		 * 组件实例创建完成
		 */
		created() {
			this.getRoleslist()
		},
	}
</script>

<style lang="scss" scoped>
	.wrapper {
		display: flex;
		align-items: center;
		border: 1px solid #efefef;

		.wrapper-one {
			width: 20%;
			text-align: center;

			i {
				margin-left: 10px;
			}
		}
	}

	.wrapper-two {
		display: flex;
		align-items: center;
		border-left: 1px solid #efefef;

		.two {
			width: 25%;
			text-align: center;

			i {
				margin-left: 10px;
			}

		}

		.three {
			width: 75%;

			.el-tag {
				margin: 10px 10px 10px 0;
			}
		}
	}
</style>
